<template>
    <!-- 查询条件区域 -->
     <div style="height: 800px;">
    <div class="search-container">
      <el-input
        v-model="searchForm.keyword"
        placeholder="请输入单据编号/客户名称/联系..."
        clearable
        class="search-input"
      />
      <el-date-picker
        v-model="searchForm.dateRange"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
        class="date-picker"
      />
      <el-select
        v-model="searchForm.quoteType"
        placeholder="报价类型"
        clearable
        class="select-item"
      >
        <el-option label="(空)" value="" />
      </el-select>
      <el-select
        v-model="searchForm.quoteSubject"
        placeholder="报价主体"
        clearable
        class="select-item"
      >
        <el-option label="请选择" value="" />
      </el-select>
      <el-select
        v-model="searchForm.salesman"
        placeholder="业务员"
        clearable
        class="select-item"
      >
        <el-option label="请选择" value="" />
      </el-select>
      <el-select
        v-model="searchForm.quoteStatus"
        placeholder="报价单状态"
        clearable
        class="select-item"
      >
        <el-option label="(空)" value="" />
      </el-select>
      <el-select
        v-model="searchForm.auditStatus"
        placeholder="审核状态"
        clearable
        class="select-item"
      >
        <el-option label="(空)" value="" />
      </el-select>
      <el-select
        v-model="searchForm.validStatus"
        placeholder="有效期状态"
        clearable
        class="select-item"
      >
        <el-option label="请选择" value="" />
      </el-select>
      <el-button type="primary" class="search-btn">查询</el-button>
     
    </div>
  
    <!-- 操作按钮区域 -->
    <div class="operation-container">
      <el-button type="primary" @click="addSaleQuotation">新增</el-button>
      <el-dropdown>
        <el-button>
          审核
          <el-icon class="el-icon--right"><ArrowDown /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>选项1</el-dropdown-item>
            <el-dropdown-item>选项2</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown>
        <el-button>
          作废
          <el-icon class="el-icon--right"><ArrowDown /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>选项1</el-dropdown-item>
            <el-dropdown-item>选项2</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown>
        <el-button>
          打印
          <el-icon class="el-icon--right"><ArrowDown /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>选项1</el-dropdown-item>
            <el-dropdown-item>选项2</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button>导入</el-button>
      <el-button>导出</el-button>
      <el-button type="danger">删除</el-button>
    </div>
  
    <!-- 表格区域，设置横向滚动 -->
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="custom-table"
        :header-cell-style="{ backgroundColor: '#f5f7fa' }"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="operation"
          label="操作"
          width="80"
        />
        <el-table-column
          prop="billDate"
          label="单据日期"
        />
        <el-table-column
          prop="billNo"
          label="单据编号"
        />
        <el-table-column
          prop="quoteType"
          label="报价类型"
        />
        <el-table-column
          prop="quoteSubject"
          label="报价主体"
        />
        <el-table-column
          prop="customerAddr"
          label="客户地址"
        />
        <el-table-column
          prop="quoteStatus"
          label="报价单状态"
        />
        <el-table-column
          prop="validStatus"
          label="有效期状态"
        />
        <el-table-column
          prop="validStartTime"
          label="有效开始时间"
        />
        <el-table-column
          prop="validEndTime"
          label="有效结束时间"
        />
        <el-table-column
          prop="salesman"
          label="业务员"
        />
        <el-table-column
          prop="deliveryMethod"
          label="交货方式"
        />
        <el-table-column
          prop="relatedOrderNo"
          label="关联销货订单号"
        />
        <el-table-column
          prop="relatedDeliveryNo"
          label="关联销货单号"
        />
        <el-table-column
          prop="goodsQuantity"
          label="商品数量"
        />
        <el-table-column
          prop="amount"
          label="金额"
        />
        <el-table-column
          prop="creator"
          label="制单人"
        />
        <el-table-column
          prop="createTime"
          label="制单时间"
        />
        <el-table-column
          prop="auditor"
          label="审核人"
        />
        <el-table-column
          prop="remark"
          label="备注"
        />
      </el-table>
    </div>
  
    <!-- 分页区域 -->
    <div class="pagination-container">
      <span class="total-count">共 0 条</span>
      <el-pagination
        layout="prev, pager, next"
        :total="0"
        :page-size="50"
        class="pagination"
      />
      <el-select
        v-model="pageSize"
        placeholder="条/页"
        class="page-size-select"
      >
        <el-option
          v-for="size in pageSizes"
          :key="size"
          :label="size"
          :value="size"
        />
      </el-select>
    </div>
</div>
  </template>
  
  <script setup>
  import { useRouter } from 'vue-router';
  import { ref } from 'vue'
  // 定义响应式数据
  const searchForm = ref({
    keyword: '',
    dateRange: [],
    quoteType: '',
    quoteSubject: '',
    salesman: '',
    quoteStatus: '',
    auditStatus: '',
    validStatus: ''
  })
  const tableData = ref([])
  const pageSize = ref(50)
  const pageSizes = ref([50, 100, 200])

  const router = useRouter();
const  addSaleQuotation = () => {
  router.push({ name: 'saleQuotation' });
}

  addSaleQuotation

  </script>
  
  <style scoped>
  /* 搜索容器样式 */
  .search-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .search-input {
    width: 200px;
  }
  .date-picker {
    width: 240px;
  }
  .select-item {
    width: 140px;
  }
  .search-btn {
    margin-left: 10px;
  }
  .reset-btn {
    margin-left: 5px;
  }
  
  /* 操作容器样式 */
  .operation-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  /* 表格容器样式，设置横向滚动 */
  .table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 10px;
  }
  .custom-table {
    min-width: 2400px; /* 保证表头不挤在一起，可根据实际调整 */
  }
  
  /* 分页容器样式 */
  .pagination-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }
  .total-count {
    color: #666;
  }
  .page-size-select {
    width: 100px;
  }
  </style>